function randomColor() {
  const hexValues = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
  var color = "#";
  for( var i = 0; i < 6; i++ ) {
    color += hexValues[Math.floor(Math.random() * hexValues.length)];
  } 

  return color;
}

class HoneycombButton {
  
  constructor( height=100, bgColor="#c0cc0c" ) {

    const width = Math.round( height * Math.sqrt(3) );
    const dom = document.createElement('div');

    const childP60 = document.createElement('div');
    const childN60 = document.createElement('div');

    const imageContaintP60 = document.createElement('div');
    const imageContaintN60 = document.createElement('div');

    const content = document.createElement("div");

    const text = document.createElement("span");

    childP60.style.position = "absolute";
    childP60.style.width = "100%";
    childP60.style.height = "100%";
    childP60.style.transform = "rotate(60deg)";
    childP60.style.overflow = "hidden";

    childN60.style.position = "absolute";
    childN60.style.width = "100%";
    childN60.style.height = "100%";
    childN60.style.transform = "rotate(-60deg)";
    childN60.style.overflow = "hidden";

    content.style.position = "absolute";
    content.style.width = "100%";
    content.style.height = "100%";
    content.style.display = "flex";
    content.style.alignItems = "center";
    content.style.justifyContent = "center";

    text.style.margin = "auto";
    text.style.font = `normal bold ${height * 0.5}px arial serif`;
    text.innerText = "按钮";

    content.appendChild( text );    

    dom.style.position = "absolute";
    dom.style.height = `${height}px`;
    dom.style.width = `${width}px`;

    dom.onselectstart = ()=>{return false;};
    dom.style.cursor = "pointer";

    imageContaintP60.style.position = "absolute";
    imageContaintP60.style.height = `200%`;
    imageContaintP60.style.width = `100%`;
    imageContaintP60.style.top = `-50%`;
    imageContaintP60.style.transform = "rotate(-60deg)";

    childP60.appendChild( imageContaintP60 )

    imageContaintN60.style.position = "absolute";
    imageContaintN60.style.height = `200%`;
    imageContaintN60.style.width = `100%`;
    imageContaintN60.style.top = `-50%`;
    imageContaintN60.style.transform = "rotate(60deg)";

    childN60.appendChild( imageContaintN60 )

    dom.appendChild( childP60 );
    dom.appendChild( childN60 );
    dom.appendChild( content );

    // 事件
    dom.onmouseover = this.onMouseOver.bind(this);
    dom.onmouseleave = this.onMouseLeave.bind(this);

    this.childN60 = childN60;
    this.childP60 = childP60;
    this.dom = dom;

    this.imageContaintN60 = imageContaintN60;
    this.imageContaintP60 = imageContaintP60;
    this.content = content;
    this.text = text;

    this.height = height;

    this.setBackgroundColor( bgColor );
    // this.setBorder( 1, "dashed", "gray");
    // this.setImage("../textures/test.png");

  }

  updateSize( height ) {

    const width = Math.round( height * Math.sqrt(3) );
    this.dom.style.height = `${height}px`;
    this.dom.style.width = `${width}px`;

  }

  setPosition( offsetX, offsetY ) {
    this.dom.style.left = `${offsetX}px`;
    this.dom.style.top = `${offsetY}px`;
  }

  setBackgroundColor( color ) {
    this.content.style.backgroundColor = color;
    this.childN60.style.backgroundColor = color;
    this.childP60.style.backgroundColor = color;
  }

  setImage( url ) {

    this.content.style.backgroundSize = "100% 200%";
    this.content.style.backgroundRepeat = "no-repeat";
    this.content.style.backgroundPosition = "center";
    this.content.style.backgroundOrigin = "content-box";
    this.content.style.backgroundClip = "content-box";
    this.content.style.backgroundImage = `url(${url})`;

    this.imageContaintN60.style.backgroundSize = "100% 100%";
    this.imageContaintN60.style.backgroundRepeat = "no-repeat";
    this.imageContaintN60.style.backgroundPosition = "center";
    this.imageContaintN60.style.backgroundOrigin = "content-box";
    this.imageContaintN60.style.backgroundClip = "content-box";
    this.imageContaintN60.style.backgroundImage = `url(${url})`;

    this.imageContaintP60.style.backgroundSize = "100% 100%";
    this.imageContaintP60.style.backgroundRepeat = "no-repeat";
    this.imageContaintP60.style.backgroundPosition = "center";
    this.imageContaintP60.style.backgroundOrigin = "content-box";
    this.imageContaintP60.style.backgroundClip = "content-box";
    this.imageContaintP60.style.backgroundImage = `url(${url})`;

  }

  setBorder( width=1, type="dashed", color="#cccccc" ) {
    this.content.style.borderLeft = `${width}px ${type} ${color}`;
    this.content.style.borderRight = `${width}px ${type} ${color}`;

    this.childN60.style.borderLeft = `${width}px ${type} ${color}`;
    this.childN60.style.borderRight = `${width}px ${type} ${color}`;

    this.childP60.style.borderLeft = `${width}px ${type} ${color}`;
    this.childP60.style.borderRight = `${width}px ${type} ${color}`;
  }

  setText( value ) {
    this.text.innerText = value;
  }

  setId( id ) {
    this.dom.id = id;
    this.text.innerText = id;
  }

  onMouseOver() {
    this.setBorder( 2, "dashed", "red");
  }

  onMouseLeave() {
    this.setBorder( 0 );
  }

  setHref( url ) {

    this.dom.onclick = ()=>{
      window.location.href = url;
    }

  }
}

class HoneycombMenu{

  constructor( menuItems=[], height=44, rows=3, cols=3, gap=10 ) {

    cols = cols > 1 ? cols : 2;
    
    const width = Math.round( height * Math.sqrt(3) );

    const dom = document.createElement("div");
    dom.style.position = "relative";
    dom.style.height = `${(height * 1.5 + gap) * rows + height * 0.5}px`;
    dom.style.width = `${(width + gap) * cols }px`;
    dom.style.border = "1px solid red";
    dom.style.borderRadius = `${height}px`;

    const items = [];

    for( var r = 0; r < rows; r++ ) {
      const isOdd = ( r % 2 !== 0 );
      const col = isOdd ? cols : cols - 1;
      for( var c = 0; c < col; c++ ) {
        var button = new HoneycombButton(height);
        button.setPosition( c * (width + gap) + (isOdd ? 0 : ( width + gap ) * 0.5) + gap * 0.5, r * ( height * 1.5 + gap) + (height + gap) * 0.5 );
        button.setBackgroundColor( randomColor() );
        button.setText(`${r}-${c}`);

        items.push( button );
        dom.appendChild( button.dom );
      }
    }

    this.items = items;
    this.cols = cols;
    this.rows = rows;
    this.gap = gap;
    this.height = height;
    this.dom = dom;

    for( var i = 0, il = menuItems.length; i < il; i++ ) {
      if(menuItems[i].id) items[i].setId( menuItems[i].id );
      if(menuItems[i].href) items[i].setHref( menuItems[i].href );
      if(menuItems[i].icon) items[i].setImage( menuItems[i].icon );

    }

  }

  updateSize( height ) {

    const cols = this.cols;
    const rows = this.rows;
    const gap = this.gap;

    const width = Math.round( height * Math.sqrt(3) );

    this.dom.style.height = `${(height * 1.5 + gap) * rows + height * 0.5}px`;
    this.dom.style.width = `${(width + gap) * cols }px`;

    var index = 0;
    for( var r = 0; r < rows; r++ ) {
      const isOdd = ( r % 2 !== 0 );
      const col = isOdd ? cols : cols - 1;
      for( var c = 0; c < col; c++ ) {
        const button = this.items[index];
        button.updateSize( height );
        button.setPosition( c * (width + gap) + (isOdd ? 0 : ( width + gap ) * 0.5) + gap * 0.5, r * ( height * 1.5 + gap) + (height + gap) * 0.5 );
        index ++;
      }
    }
    
    this.height = height;
  }

  setName( name, row, col ) {

    const cols = this.cols;
    const index = row * (cols - 1) + col + Math.floor(row / 2);

    if( index >= this.items.length ) {
      console.error("超出索引范围", row, col, index);
      return;
    }

    this.items[index].setText( name );

  }


  setCallback( callback, row, col ) {

    const cols = this.cols;
    const index = row * (cols - 1) + col + Math.floor(row / 2);

    if( index >= this.items.length ) {
      console.error("超出索引范围", row, col, index);
      return;
    }

    this.items[index].onclick = callback;

  }

}

export{
  HoneycombMenu
}